﻿@model WebExtras.JQDataTables.Datatable

<div class="well ui-well">
  <h4>Creating column definitions</h4>
  Column definitions are created by instantiating the <i>WebExtras.JQDataTables.AOColumn</i> class
  <pre><code>
  AOColumn dtColumn = new AOColumn
  {
      sTitle = "First Column",    <span class="comment">// Only the sTitle property is compulsory. All other properties are optional</span>
      bSortable = true,
      sClass = "",                <span class="comment">// any extra CSS class you would like to apply to this column</span>
      sWidth = "10%",             <span class="comment">// specified as a CSS width</span>
      bVisible = true
  };  
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Creating table settings</h4>
  Table settings are created by instantiating the <i>WebExtras.JQDataTables.DatatableSettings</i> class 
  <pre><code>  
  <span class="comment">// We need a collection of columns to be specified in the settings, so create an array from our column</span>
  AOColumn[] dtColumns = new AOColumn[] { dtColumn };

  DatatableSettings dtSettings = new DatatableSettings 
  (
    5,                                      <span class="comment">// specify the number of records per page</span>
    dtColumns,                              <span class="comment">// Column definitions</span>
    new AASort(0, ESort.Ascending),         <span class="comment">// specify one initial sort, multiple initial sorts, or leave null for no sort</span>
    null,                                   <span class="comment">// specify an AJAX source to retrieve data from</span>
    "basic records",                        <span class="comment">// specify a table footer suffix</span>
    "150px"                                 <span class="comment">// specify a maximum table height, once reached you will get scroll bars</span>
  );
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Creating table records</h4>
  Table records are created by instantiating the <i>WebExtras.JQDataTables.DatatableRecords</i> class
  <pre><code>
  <span class="comment">// Let's create the actual data to go into the table</span>
  string[][] dtData = new string[][]
  {
    new string[] { "first column row 1" },
    new string[] { "first column row 2" }
  };

  DatatableRecords dtRecords = new DatatableRecords
  {
    iTotalRecords = dtData.Length,            <span class="comment">// Total records in table</span>
    iTotalDisplayRecords = dtData.Length,     <span class="comment">// Total records to be displayed in the table</span>
    aaData = dtData                           <span class="comment">// The data to be displayed</span>
  };
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Creating the table object</h4>
  Let us now bring all the different components together
  <pre><code>
  <span class="comment">// Let's create the datatable object with an HTML ID, our settings and records</span>
  Datatable dtable = new Datatable("demo-table", dtSettings, dtRecords);
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Now let's see the output</h4>
  <div class="output">
    @Html.Partial(MVC.Shared.Views._Datatable, Model)
  </div>
</div>
